<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="100"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
            >
            <div>
              <div class="name">姓名：{{ item.customerInfo.name }}</div>
              <div style="margin-top: 5px;margin-bottom: 5px">下单编号：{{ item.placeOrderNo }}</div>
              <div class="contact">
                <span>下单时间：{{ item.placeOrderTime }}</span>
                <span style="margin-left: 20px;">送达时间：{{ item.deliveredTime||'' }}</span>
              </div>
              <div class="contact">
                <span>确认送达时间：{{ item.confirmDeliveredTime || '无' }}</span>
                <span style="margin-left: 20px;">送达状态：{{ getDeliveredStatusValue(item.deliveredStatus) }}</span>
              </div>
              <div class="contact">
                <span>创建人：{{ item.createBy }}</span>
                <span style="float: right">
                  <a @click="placeOrderDetail(item.id)">详情</a>
                  <a-divider type="vertical" v-if="item.deliveredStatus == null"/>
                  <a-popconfirm v-if="item.deliveredStatus == null" title="当前订单材料是否已送达?" @confirm="() => confirmDelivered(item)">
                    <a>确认送达</a>
                  </a-popconfirm>
                </span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <place-order-detail-modal ref="placeOrderDetailModal"></place-order-detail-modal>

  </a-drawer>

</template>

<script>
  import { filterObj } from '@/utils/util'
  import { getAction, postAction,putAction } from '@/api/manage'
  import placeOrderDetailModal from './placeOrderDetailModal'

  export default {
    name: "placeOrderList",
    components:{
      placeOrderDetailModal,
    },
    data() {
      return {
        width: '100%',
        model: {},
        title: "",
        columns:[
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            },
            fixed: 'left'
          },
          {
            title:'下单编号',
            align:"center",
            dataIndex: 'placeOrderNo'
          },
          {
            title:'客户姓名',
            align:"center",
            dataIndex: 'customerInfo.name'
          },
          {
            title:'项目地址',
            align:"center",
            dataIndex: 'customerInfo.address'
          },
          {
            title:'下单时间',
            align:"center",
            dataIndex: 'placeOrderTime'
          },
          {
            title:'送达时间',
            align:"center",
            dataIndex: 'deliveredTime'
          },
          {
            title:'确认送达时间',
            align:"center",
            dataIndex: 'confirmDeliveredTime',
            customRender:function (text) {
              if (text != null){
                return text
              }else {
                return "-"
              }
            }
          },
          {
            title:'送达状态',
            align:"center",
            dataIndex: 'deliveredStatus',
            customRender:function (text) {
              if (text == 1){
                return "准时送达"
              }else if (text == 2){
                return "超时送达"
              }else {
                return "-"
              }
            }
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 147,
            scopedSlots: {
              customRender: 'action'
            },
          }
        ],
        visible: false,
        // 查询条件
        queryParam: {},
        //数据集
        dataSource: [],
        loading: false,
        finished: false,
        selectedRowKeys: [],
        selectedRows: [],
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          placeOrderList: "/ghProjectPlaceOrder/placeOrderList",
          placeOrderEdit: "/ghProjectPlaceOrder/edit",
        },
        currentCustomerId: 0,
      }
    },
    created() {

    },
    methods: {
      handleCancel() {
        this.visible = false;
        this.onClearSelected();
      },
      onLoadList(e){
        this.ipagination.current++
        this.loadData(this.ipagination.current)
      },
      loadData(arg) {
        this.loading = true;
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
          this.finished = false;
        }
        let params = {};
        params.customerId = this.currentCustomerId;
        getAction(this.url.placeOrderList,params).then((res) => {
          if (res.success) {
            this.dataSource = [...this.dataSource, ...res.result.records]
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
          } else {
            this.$message.warning(res.message)
          }
          if(res.result.records.length<10){
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectedRows = [];
      },

      onSelectAll(selected, selectedRows, changeRows) {
        if(selected) {
          let rows = [...selectedRows]
          this.selectedRows = this.selectedRows.concat(rows)
        } else {
          changeRows.forEach(item => {
            const delIndex = this.selectedRows.findIndex((val) => {
              return val.id === item.id
            })
            this.selectedRows.splice(delIndex, 1)
          })
        }
      },
      onSelect(record, selected) {
        if(selected) {
          this.selectedRows.push(record);
        } else {
          const delIndex = this.selectedRows.findIndex((val) => {
            return val.id === record.id
          })
          this.selectedRows.splice(delIndex,1)
        }
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },

      show(customerId){
        this.currentCustomerId = customerId;
        this.visible = true;
        this.title = "材料下单列表";
        this.loadData(1);
      },
      //下单详情
      placeOrderDetail(id){
        this.$refs.placeOrderDetailModal.show(id);
      },
      //确认送达
      confirmDelivered(record){
        let that = this;
        putAction(this.url.placeOrderEdit,record).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            that.loadData(1);
          }
        })
      },
      getDeliveredStatusValue(value){
        if (value == 1){
          return "准时送达"
        }else if (value == 2){
          return "超时送达"
        }else {
          return "无"
        }
      },
    }
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/common.less';
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .list{
    overflow-y: scroll;
    height: calc(100vh - 100px);
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
  }
  .name{
    margin-top: 10px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }

</style>